<template>
  <div style="padding:20px">
    <a-table
      :rowKey="pk"
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :size="size"
      :bordered="bordered"
      :scroll="scroll"
      :rowSelection="
        mode !== 'checkbox' && mode !== 'radio'
          ? null
          : {
              type: mode,
              selectedRowKeys: selectedRowKeys,
              fixed: true,
              onChange: onSelectChange,
            }
      "
      :pagination="
        !pagination
          ? false
          : {
              current: pageNo,
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              size: 'small',
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total) => `共 ${total} 条`,
              onChange: jumpPage,
              onShowSizeChange: changePageSize,
            }
      "
    >
      <template
        v-for="(func, name) of $scopedSlots"
        v-slot:[name]="text, record, index"
      >
        <template v-if="name === 'no'">
          <slot
            :name="name"
            v-bind="
              Object.assign(record, { index: (pageNo - 1) * pageSize + index })
            "
          ></slot>
        </template>
        <template v-else-if="name === 'expandedRowRender'">
          <slot :name="name" v-bind="text"></slot>
        </template>
        <template v-else>
          <slot :name="name" v-bind="record"></slot>
        </template>
      </template>
             <span slot="action" slot-scope="">
 
      <a>编辑</a>
      <a-divider type="vertical" />
    <a-dropdown>
    <a class="ant-dropdown-link" >
      更多 <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">删除</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">提交</a>
      </a-menu-item>
      <a-menu-item>
        <a href="javascript:;">执行</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
    </span>
    </a-table>
  </div>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    pk: { type: String, default: "id" },
    columns: { type: Array, default: () => [] },
    dataSource: { type: Array, default: () => [] },
    tableLoading: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
    pagination: { type: Boolean, default: true },
    total: { type: Number, default: 0 },
    size: { type: String, default: "default" },
    mode: { type: String, default: "" },
    active: { type: Array, default: () => [] },
    scroll: { type: Object, default: () => {} },
  },
  data() {
    return {
      selectedRowKeys: this.active,
      pageNo: 1,
      pageSize: 10,
    };
  },
  methods: {
    jumpPage(pageNo, pageSize) {
      this.pageNo = pageNo || this.pageNo;
      this.pageSize = pageSize || this.pageSize;
      this.$emit("queryData", { pageNo: pageNo, pageSize: pageSize });
    },
    changePageSize(pageNo, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.$emit("queryData", { pageNo: 1, pageSize: pageSize });
    },
    // 选中，取消选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      this.$emit("select", this.selectedRowKeys);
    },
    // 清空selectedRowKeys
    clearSelect() {
      this.selectedRowKeys = [];
    },
    // 在父组件刷新数据时调用子组件传入当前分页参数
    refreshData() {
      this.$emit("queryData", { pageNo: this.pageNo, pageSize: this.pageSize });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
